 {extend name="$index_style_layout" /}
 
{block name="head_title"}用户登录{/block}
 {block name="nav"}{/block}
 {block name="body_AllScorllSlide"}<!---通栏幻灯片----->{/block}
{block name="body_content"}
<style type="text/css">
 .login-content{ position: relative; height: 500px; z-index: 1;	}
.login-content .login-form{ position: absolute; z-index: 1; width: 346px; background: #fff; overflow: visible; top:30px; right: 0; }
.login-content .login-form .login-con{ width: 286px; padding: 15px 30px; }
.login-banner{ height: 500px;}
.login-banner .login-img{ display: block; width: 100%; height: 500px;}
.pos-r {position: relative!important;}
.w990 {width: 990px;margin: 0 auto;}
	/*登录*/
.form-control-box .icon, .login-wrap .form-group .form-control-error i, .login-content .login-form .msg-wrap .msg-icon, .login-wrap .item-coagent a i, .login-wrap .item-coagent a:hover i, .login-con .login-switch a, .login-mobile .default-state .qrcode-desc i { background: url(__STATIC__/index/login-regiser-icon.png) no-repeat;}

/*二维码、PC端登录切换*/
.login-switch { width: 52px; height: 52px; position: absolute; right: 10px; top: 10px; }
.login-switch a { width: 52px; height: 52px; display: inline-block; cursor: pointer; }
.login-switch a.btn-qrcode{ background-position: -308px 0; }
.login-switch a.btn-login{ background-position: -308px -60px; }
/*pc端登录*/
.login-form{ width: 346px; background: #fff; overflow: visible;}
.login-form .login-con{ width: 286px; padding: 10px 30px; }
.login-wrap .login-tit{ height: 25px; line-height: 25px; color: #999; }
.login-wrap .login-tit .regist-link{ font-size: 12px; }
.login-wrap .login-tit .regist-link em{ font-family: sinum; font-weight: bold; }
.login-wrap .login-radio{ height: 35px; line-height: 35px; padding: 5px 0 0; margin: 15px 0 30px; }
.login-wrap .login-radio ul{ width: 100%; height: 36px; line-height: 35px; display: inline-block; border-bottom-width: 1px; border-bottom-style: solid}
.login-wrap .login-radio ul li{ float: left; height: 35px; line-height: 35px; margin-right: 15px; padding: 0 15px; background: #fff; font-size: 13px; cursor: pointer;}
.login-wrap .login-radio ul li.active{ border-width: 2px 1px 0; border-style: solid;}

.login-wrap .form-group{ overflow: hidden; height: 65px; position: relative; }
.login-wrap .form-group .form-control-box{ height: 38px; border: 1px solid #ddd; position: relative;}
.login-wrap .form-group .form-control-box.error{ border: 1px solid #E31939; }
.login-wrap .form-group .icon{ display: block; width: 20px; height: 20px; position: absolute; left: 10px; top: 9px; }
.login-wrap .form-group.item-name .icon{ background-position:0 -15px; }
.login-wrap .form-group.item-password .icon{ background-position: 0 -36px; }
.login-wrap .form-group .text{ line-height: 38px; height: 37px; border: 0; padding: 0 0 0 40px; width: 244px; float: none; font-size: 14px; overflow: hidden; }
.login-wrap .form-group-spe .form-control-box{ height: 40px; border: none;}
.login-wrap .form-group-spe .form-control-box.error{ border: none; }
.login-wrap .form-group-spe .form-control-box .text{ width: 80px; line-height: 38px; height: 38px; padding: 0 0 0 40px; border: 1px solid #ddd; }
.login-wrap .form-group-spe .form-control-box.error .text{ border: 1px solid #E31939;}
.login-wrap .form-group.captcha .icon{ background-position: 0 -57px; }
.login-wrap .form-group .form-control-error{ height: 25px; line-height: 25px; color: #999; overflow: hidden; }
.login-wrap .form-group .form-control-error i{ width: 14px; height: 14px; background-position: 0 0; margin-right: 5px; margin-top: -2px; display: inline-block;}

.login-wrap .form-group.form-group-phonecode .icon{ background-position: 0 -57px; }
.login-wrap .form-group-spe .phonecode{ background: #F6F6F6; border: 1px solid #d9d9d9; cursor: pointer; padding: 0 8px; display: inline-block; line-height: 38px; height: 38px; color: #666; margin-left: 10px; text-align: center; width: 120px; margin-top: -4px;}

.login-wrap .safety{ margin-bottom: 15px; overflow: hidden; height: 18px; line-height: 18px; }
.login-wrap .safety label{ cursor: pointer; }
.login-wrap .safety label .checkbox{ margin: 0 3px 0 0; vertical-align: middle; cursor: pointer; }
.login-wrap .safety label span{ vertical-align: middle; cursor: pointer; }
.login-wrap .safety .forget-password{ margin-top: 3px; }

.login-wrap .login-btn{ margin-bottom: 20px; overflow: hidden; }
.login-wrap .login-btn .btn-img{ width: 286px; height: 35px; font-size: 14px; color: #FFF; text-align: center; line-height: 35px; text-decoration: none; cursor: pointer; letter-spacing: 2px; border: none; }

.login-wrap .item-coagent{ height: 43px; line-height: 43px; overflow: hidden; }
.login-wrap .item-coagent a{ float: left; width: 43px; height: 43px; position: relative; margin-right: 20px; margin-left: 25px; }
.login-wrap .item-coagent a i{ display: block; width: 43px; height: 43px; position: absolute; left: 0; top: 0; }
.login-wrap .item-coagent a i.qq{ background-position: -85px 0; }
.login-wrap .item-coagent a i.alipay{ background-position: -142px 0; }
.login-wrap .item-coagent a i.sina{ background-position: -199px 0; }
.login-wrap .item-coagent a i.weixin{ background-position: -254px 0; }
.login-wrap .item-coagent a:hover i.qq{ background-position: -85px -45px; }
.login-wrap .item-coagent a:hover i.alipay{ background-position: -142px -45px; }
.login-wrap .item-coagent a:hover i.sina{ background-position: -199px -45px; }
.login-wrap .item-coagent a:hover i.weixin{ background-position: -254px -45px; }
.login-wrap .item-coagent a.last{ margin-right: 0; }

/*扫描登录*/
.login-mobile .default-state { width: 290px; margin-top: 44px; padding-bottom: 15px; text-align: center; position: relative;}
.login-mobile .default-state .qrcode-tit { padding: 0 0 25px; color: #888; font-size: 16px; }
.login-mobile .default-state .qrcode-box{ position: relative; margin-top: 10px; height: 150px;}
.qrcode-box .qrcode { width: 150px; height: 150px; position: absolute; left: 70px; top: 0; z-index: 100;}
.qrcode-box .qrcode img{ width: 150px; height: 150px; display: inline; }
 
.login-mobile .default-state .qrcode-desc { overflow: hidden; width: 150px; margin: 30px auto 0; text-align: left; }
.login-mobile .default-state .qrcode-desc i { width: 30px; height: 30px; background-position: -50px -90px; float: left; margin-right: 10px; margin-top: 3px; display: inline-block; }
.login-mobile .default-state .qrcode-desc p { width: 110px; line-height: 18px; color: #999;  font-size: 12px; float: left; }
 
.login-links { margin-top: 25px; overflow: hidden; text-align: right;}
.login-links a { margin-right: 10px; color: #6c6c6c;}

/*登录页面*/
.login-wrap .login-radio ul{ border-color:#E31939;}
.login-wrap .login-radio ul li.active{ border-color:#E31939; color: #E31939;}
.qrcode-error .refresh { background:#E31939;}
.btn{display:inline-block;padding:6px 12px;margin:0 auto;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;width:100%;display:block}
.btn_red{color:#fff;background-color:#d9534f;border-color:#d43f3a}
.btn_red:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.login-btn{height:42px;background-color: #ff3c3c;color:#fff;font-size:16px;}
.login-btn:hover{background-color: #d72226;}
</style>
<div class="login-content">
  <div class="login-banner" style="background: url('__STATIC__/index/login-bg.jpg') center;">
    <div class="w990 pos-r">
      <div id="1565950076p1XQmx" class="login-form">
        <div class="login-con pos-r">
          <div class="login-switch"> <a href="javascript:;" class="qrcode-target btn-qrcode" on-moblie="false" title="去手机扫码登录"></a> </div>
          <div class="login-wrap " style="display: block;">
            <div class="login-tit"> 还没有账号？ <a href="{:urls('reg/index')}" class="regist-link color"> 立即注册 <i>&gt;</i> </a> </div>
            <div class="login-radio">
              <ul>
                <li class="active" id="login2" onclick="setTab('login',2,2)">普通登录</li>
                <li class="" id="login1" onclick="setTab('login',1,2)">动态密码登录</li>
              </ul>
            </div>
            <!-- 普通登录 start -->
            
            <div id="con_login_2" class="form" style="display: block;">
              <form id="form2" action="{:urls('login/index')}"  method="post">
                <div class="form-group item-name">
                  <div class="form-control-box "> <i class="icon"></i>
                    <input type="text" id="username" name="username" class="text" tabindex="1" placeholder="请输入帐号" >
                  </div>
                </div>
                <div class="form-group item-password">
                  <div class="form-control-box"> <i class="icon"></i>
                    <input type="password" id="password" name="password" class="text" tabindex="2" placeholder="请输入密码">
                  </div>
                </div>
                <div class="safety"> <a class="forget-password fl" href="{:urls('reg/index')}">注册账户</a> <a class="forget-password fr" href="{:urls('getpassword/index')}">忘记密码？</a> </div>
                <div class="login-btn">
                  <input type="hidden" name="fromurl" value="{$fromurl}">
                  <input type="submit" name="submit" class="btn login-btn"  value="立即登录">
                </div>
                <div class="item-coagent"> <a href="javascript:void(0)" class="website-login weixinsacn"> <i class="weixin"></i> </a> <a href="{:purl('login/qq/index')}" class="website-login"> <i class="qq"></i> </a> </div>
              </form>
            </div>
            
            <!-- 动态登录 star -->
            
            <div id="con_login_1" class="form" style="display: none;">
              <form id="form1" action="{:urls('login/phone_reg')}" method="post">
                <div class="form-group item-name">
                  <div class="form-control-box phonelogin"> <i class="icon"></i>
                    <input type="text" id="mobphone" name="mobphone" class="text"  placeholder="输入手机号码" >
                  </div>
                </div>
                <div class="form-group form-group-spe form-group-phonecode">
                  <div class="form-control-box fl"> <i class="icon"></i>
                    <input type="text" id="phone_code" name="phone_code" class="text"  placeholder="手机验证码">
                    <a onclick="get_code_num('mobphone')" href="javascript:void(0);" class="phonecode">获取手机验证码</a> </div>
                </div>
                <div class="form-group item-name" id='phonename' style="display: none">
                  <div class="form-control-box"> <i class="icon"></i>
                    <input type="text" name="username" class="text"  placeholder="输入用户名"  onBlur="checkinput($(this),'username')">
                  </div>
                </div>
                <div class="safety"> <a class="forget-password fl" href="{:urls('reg/index')}">注册账户</a> <a class="forget-password fr" href="{:urls('getpassword/index')}">忘记密码？</a> </div>
                <div class="login-btn" id='submit_btn'>
                  <button type="button" class="btn login-btn" onclick="check_num($('#phone_code'))">确认登录</button>
                </div>
                <div class="login-btn" id='submit_reg' style="display: none">
                  <input type="hidden" name="fromurl" value="{$fromurl}">
                  <button type="submit" class="btn login-btn">立即注册</button>
                </div>
                <div class="item-coagent"> <a href="javascript:void(0)" class="website-login weixinsacn"> <i class="weixin"></i> </a> <a href="{:purl('login/qq/index')}" class="website-login"> <i class="qq"></i> </a> </div>
              </form>
            </div>
          </div>
          <!-- 扫码登录 start -->
          
          <div class="login-mobile" style="display: none;">
            <div class="default-state">
              <p class="qrcode-tit">微信扫码，安全登录</p>
              <div class="qrcode-box">
                <div class="qrcode"> <img src="{:purl('login/scan/qrcode',['type'=>'wx'])}" style="width:150px;height:150px"> </div>
              </div>
              <div class="qrcode-desc"> <i></i>
                <p> 打开微信
                
                <p>扫一扫登录</p>
                </p>
              </div>
              <div class="login-links"> <a href="javascript:void(0)" class="forget-pwd">密码登录</a> <a href="{:urls('reg/index')}" class="register" >免费注册</a> </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>
<script>
 function get_code_num(type) {
    var to = '';
    var obj = $(".phonelogin input[name='" + type + "']");
    to = obj.val();
    if (to == '') {
        obj.focus();
        layer.msg('请先输入手机号码');
        return false;
    }
    layer.msg('请稍候,系统正在发送手机验证码!', {
        time: 3000
    });
    $.get("{:urls('login/get_phone_num')}?phone=" + to + '&' + Math.random(), function(res) {
        layer.close();
        if (res.code == 0) {
            layer.alert('验证码已成功发出,请耐心等候,注意查收!');
        } else {
            layer.alert(res.msg);
        }
    });
}

function check_num(objs) {
    var vals = objs.val();
    var index = layer.load(1, {
        shade: [0.7, '#393D49']
    }, {
        shadeClose: true
    });
    $.get("{:urls('login/check_phone_num')}?num=" + vals + '&' + Math.random(), function(res) {
        layer.closeAll();
        if (res.code == 0) {
            if (res.data.type == 'login') {
                layer.msg('登录成功,欢迎' + res.data.username + '您回来');
                window.location.href = decodeURIComponent("{$fromurl}");
            } else if (res.data.type == 'reg') {
                $("#submit_btn").hide();
                layer.alert('验证成功,请为新帐号设置一个登录名');
                $("#phonename").show();
                $("#submit_reg").show();
            } else {
                layer.alert(res.msg);
            }
        } else {
            layer.msg(res.msg);
        }
    });
}

function checkinput(objs, type) {
    var vals = objs.val();
    $.get("{:urls('reg/check')}?" + type + "=" + vals + '&' + Math.random(), function(d) {
        if (d == 'ok') {
            objs.removeClass('error');
        } else {
            layer.msg(d);
            objs.addClass('error');
        }
    });
}
 //二维码、PC登录切换
$('.qrcode-target').click(function(){
	if($(this).hasClass('btn-qrcode')){
		$(this).removeClass('btn-qrcode').addClass('btn-login').attr('title','去电脑登录');
		
		$('.login-wrap').hide();
		$('.login-mobile').eq(0).removeClass("hide").show();
		 
		return;
	}
	if($(this).hasClass('btn-login')){
		$(this).removeClass('btn-login').addClass('btn-qrcode').attr('title','去手机扫码登录');
		$('.login-wrap').show();
		$('.login-mobile').hide();
		 
	}
});
$('.weixinsacn').click(function(){
	 $(this).removeClass('btn-qrcode').addClass('btn-login').attr('title','去电脑登录');
		$('.login-wrap').hide();
		$('.login-mobile').eq(0).removeClass("hide").show();
});
$('.forget-pwd').click(function(){
			$('.qrcode-target').removeClass('btn-login').addClass('btn-qrcode').attr('title','去手机扫码登录');
			$('.login-wrap').show();
			$('.login-mobile').hide();
			 
});
 function setTab(name, cursel, n) {
	for (i = 1; i <= n; i++) {
		var menu = $("#" + name + i);
		var con = $("#con_" + name + "_" + i);

		if (i == cursel) {
			$(con).show();
			$(menu).addClass("active");
		} else {
			$(con).hide();
			$(menu).removeClass("active");
		}
	}
}
function countSecond(){　
	$.get("{:purl('login/scan/cklogin')}?"+Math.random(), function(data){
		if(data=='ok')window.location.href="{:purl('login/scan/cklogin')}?type=success";
	});
	setTimeout("countSecond()",2000);
}
countSecond()
</script> 
{/block}